{% stylesheet %}
@media screen and (max-width: 767px) {
  .block_information_bar {
    display: none;
  }
  .block_information_bar.show_information_bar {
    display: block;
  }
}

.block_information_bar .information_list {
  display: flex;
  flex-wrap: wrap;
  min-height: 56px;
  align-items: center;
}

.block_information_bar .information_list li {
  display: flex;
  align-items: center;
  justify-content: var(--algin-type);
  flex: 0 0 50%;
  flex-shrink: 0;
  padding: 12px;
  box-sizing: border-box;
  gap: 12px;
}

@media screen and (max-width: 767px) {
  .block_information_bar .information_list li {
    flex: 0 0 100%;
  }
}

@media screen and (min-width: 1201px) {
  .block_information_bar .information_list li {
    flex: 0 0 25%;
  }
}

.block_information_bar .information_list li img {
  max-height: 20px;
}

.block_information_bar .information_list li span {
  font-size: 12px;
}

.block_information_bar_swiper {
  position: relative;
  display: none;
  padding: 20px 0;
}

.block_information_bar_swiper .swiper {
  overflow: hidden;
}

.block_information_bar_swiper .information_list {
  align-items: center;
}

@media screen and (max-width: 767px) {
  .block_information_bar_swiper.show_information_bar_swiper {
    display: block;
  }
  .block_information_bar_swiper .container_wrapper {
    padding-left: 70px;
    padding-right: 70px;
  }
}

.block_information_bar_swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: var(--algin-type);
  height: 100%;
  gap: 12px;
}

.block_information_bar_swiper .swiper-slide img {
  max-height: 20px;
}

.block_information_bar_swiper .swiper-slide span {
  font-size: 12px;
}

.block_information_bar_swiper .swiper-button-next, .block_information_bar_swiper .swiper-button-prev {
  background-image: none;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  outline: none;
  height: 44px;
  width: 44px;
}

.block_information_bar_swiper .swiper-button-next:hover, .block_information_bar_swiper .swiper-button-prev:hover {
  border-color: #211c1c;
}

.block_information_bar_swiper .swiper-button-next svg, .block_information_bar_swiper .swiper-button-prev svg {
  width: 12px;
  height: 12px;
}

{% endstylesheet %}
{% assign data = section.settings %}
<div class="block_information_bar {% if data.is_swiper == false %}show_information_bar{%endif%}">
    <div class="container_wrapper">
        <ul class="information_list" style="--algin-type: {{data.algin_type}}">
            {%- for block in section.blocks -%}
            <li>
                {% if block.image.src != '' %}
								{% include 'lazy_img',  src:block.image.src,  alt:block.image.alt %}
                {% endif %}
                <span>{{block.detail}}</span>
            </li>
            {%- endfor -%}
        </ul>
    </div>
</div>

<div class="block_information_bar_swiper {% if data.is_swiper %}show_information_bar_swiper{%endif%}">
    <div class="container_wrapper">
        <div class="swiper" id="information_bar_swiper_{{ block_id | default : section.block_id  }}">
            <ul class="information_list swiper-wrapper" style="--algin-type: {{data.algin_type}}">
                {%- for block in section.blocks -%}
                <li class="swiper-slide">
                    {% if block.image.src != '' %}
										{% include 'lazy_img',  src:block.image.src,  alt:block.image.alt %}
											
                    {% endif %}
                    <span>{{block.detail}}</span>
                </li>
                {%- endfor -%}
            </ul>
        </div>
       
    </div>
    <div class="swiper-button-next">
        <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-right" aria-hidden="true"
            focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M8.30497 9.17881L9.01207 8.47171L8.30497 7.7646L2.21962 1.67926L1.51251 2.38636L7.59786 8.47171L1.51251 14.5571L2.21962 15.2642L8.30497 9.17881Z"
                fill="currentColor"></path>
            <path
                d="M9.01207 8.47171L9.36563 8.82526L9.71918 8.47171L9.36563 8.11815L9.01207 8.47171ZM8.30497 9.17881L7.95141 8.82526V8.82526L8.30497 9.17881ZM8.30497 7.7646L7.95141 8.11816V8.11816L8.30497 7.7646ZM2.21962 1.67926L2.57317 1.3257L2.21962 0.97215L1.86607 1.3257L2.21962 1.67926ZM1.51251 2.38636L1.15896 2.03281L0.805407 2.38636L1.15896 2.73992L1.51251 2.38636ZM7.59786 8.47171L7.95141 8.82526L8.30497 8.47171L7.95141 8.11816L7.59786 8.47171ZM1.51251 14.5571L1.15896 14.2035L0.805405 14.5571L1.15896 14.9106L1.51251 14.5571ZM2.21962 15.2642L1.86607 15.6177L2.21962 15.9713L2.57317 15.6177L2.21962 15.2642ZM8.65852 8.11815L7.95141 8.82526L8.65852 9.53237L9.36563 8.82526L8.65852 8.11815ZM7.95141 8.11816L8.65852 8.82526L9.36563 8.11815L8.65852 7.41105L7.95141 8.11816ZM1.86607 2.03281L7.95141 8.11816L8.65852 7.41105L2.57317 1.3257L1.86607 2.03281ZM1.86607 2.73992L2.57317 2.03281L1.86607 1.3257L1.15896 2.03281L1.86607 2.73992ZM7.95141 8.11816L1.86607 2.03281L1.15896 2.73992L7.24431 8.82526L7.95141 8.11816ZM1.86607 14.9106L7.95141 8.82526L7.24431 8.11816L1.15896 14.2035L1.86607 14.9106ZM2.57317 14.9106L1.86607 14.2035L1.15896 14.9106L1.86607 15.6177L2.57317 14.9106ZM7.95141 8.82526L1.86607 14.9106L2.57317 15.6177L8.65852 9.53237L7.95141 8.82526Z"
                fill="currentColor"></path>
        </svg>
    </div>
    <div class="swiper-button-prev">
        <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-left" aria-hidden="true"
            focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M1.58188 7.76454L0.874768 8.47165L1.58188 9.17876L7.66722 15.2641L8.37433 14.557L2.28898 8.47165L8.37433 2.38631L7.66722 1.6792L1.58188 7.76454Z"
                fill="currentColor"></path>
            <path
                d="M0.874768 8.47165L0.521215 8.1181L0.16766 8.47165L0.521215 8.8252L0.874768 8.47165ZM1.58188 7.76454L1.93543 8.1181L1.93543 8.1181L1.58188 7.76454ZM1.58188 9.17876L1.93543 8.8252L1.93543 8.8252L1.58188 9.17876ZM7.66722 15.2641L7.31367 15.6177L7.66722 15.9712L8.02077 15.6177L7.66722 15.2641ZM8.37433 14.557L8.72788 14.9106L9.08143 14.557L8.72788 14.2034L8.37433 14.557ZM2.28898 8.47165L1.93543 8.1181L1.58188 8.47165L1.93543 8.8252L2.28898 8.47165ZM8.37433 2.38631L8.72788 2.73986L9.08144 2.38631L8.72788 2.03275L8.37433 2.38631ZM7.66722 1.6792L8.02078 1.32565L7.66722 0.972092L7.31367 1.32565L7.66722 1.6792ZM1.22832 8.8252L1.93543 8.1181L1.22832 7.41099L0.521215 8.1181L1.22832 8.8252ZM1.93543 8.8252L1.22832 8.1181L0.521215 8.8252L1.22832 9.53231L1.93543 8.8252ZM8.02077 14.9105L1.93543 8.8252L1.22832 9.53231L7.31367 15.6177L8.02077 14.9105ZM8.02077 14.2034L7.31367 14.9105L8.02077 15.6177L8.72788 14.9106L8.02077 14.2034ZM1.93543 8.8252L8.02077 14.9106L8.72788 14.2034L2.64254 8.1181L1.93543 8.8252ZM8.02078 2.03275L1.93543 8.1181L2.64254 8.8252L8.72788 2.73986L8.02078 2.03275ZM7.31367 2.03275L8.02078 2.73986L8.72788 2.03275L8.02078 1.32565L7.31367 2.03275ZM1.93543 8.1181L8.02078 2.03275L7.31367 1.32565L1.22832 7.41099L1.93543 8.1181Z"
                fill="currentColor"></path>
        </svg>
    </div>
</div>
<script type="text/javascript">
(function(){(function () {
  let timer = null;
  new Swiper("#information_bar_swiper_{{ block_id | default : section.block_id  }}", {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    }
  });
})();
})()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_information_bar",
	"icon": "icon-zhuanjishangpin",
	"is_global": false,
	"name": {
		"zh_CN": "信息列表",
		"en_US": "Information list"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示移动端swiper",
				"en_US": "Show mobile swiper"
			},
			"default": true,
			"id": "is_swiper"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "对齐方式",
				"en_US": "Alignment"
			},
			"default": "center",
			"id": "algin_type",
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "flex-start"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "flex-end"
				}
			]
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "信息列表",
				"en_US": "Information list"
			},
			"type": "item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度40px以上，高度自适应",
						"en_US": "Recommended width above 40px, height adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "detail",
					"default": ""
				}
			]
		}
	],
	"default": {
		"settings": {
			"is_swiper": true,
			"algin_type": "center"
		},
		"blocks": [
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"detail": "Detail",
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"detail": "Detail",
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"detail": "Detail",
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"detail": "Detail",
				"block_type": "item"
			}
		]
	}
}
{% endschema %}